<template>
    <div class="deviceType">
        <div class="boxTitle">
            <img src="@/assets/images/home/rightIcon.png" alt="">
            <span class="title">设备类型统计</span>
        </div>
        <div class="content">
            <div v-for="(item, index) in state.items" :key="index" class="deviceList">
                <div class="top">
                    <span>{{ item.name }}</span>
                    <span class="spanColor">总数:{{ item.total }}</span>
                    <span>远程监控:{{ item.num }}</span>
                    <span>非远程监控:{{ item.num2 }}</span>
                </div>
                <div class="progressBar">
                    <div class="fill" :style="{ width: item.percentage }"></div>
                    <div class="notFill"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const state = reactive({
    items: [
        { name: '焚烧炉总貌', num: 60, num2: 40, percentage: '60%', total: 100, },
        { name: '点火系统', num: 60, num2: 40, percentage: '60%', total: 100, },
        { name: '汽水系统', num: 60, num2: 40, percentage: '60%', total: 100, },
        { name: '吹灰系统', num: 60, num2: 40, percentage: '60%', total: 100, },
        { name: 'MFT系统', num: 60, num2: 40, percentage: '60%', total: 100, },
        { name: '排渣系统', num: 60, num2: 40, percentage: '60%', total: 100, },
    ]
})
</script>

<style lang="scss" scoped>
.deviceType {
    transition: transform 0.5s ease;
    position: absolute;
    z-index: 999;
    padding-left: vh(28);
    padding-right: vh(28);
    background: url(@/assets/images/dailyMaintenance/left3.png) no-repeat;
    background-size: 100% 100%;
    left: vw(20);
    top: vh(527);
    width: vw(422);
    height: vh(495);

    .boxTitle {
        img {
            width: vh(16);
            height: vh(14);
        }
    }

    .content {
        margin-top: vh(30);
        .deviceList {
            margin-bottom: vh(40);
            .top {
                display: flex;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vh(12);
                color: #FFFFFF;
                margin-bottom: vh(10);
                .spanColor {
                    color: #F4A906;
                }
                span {
                    width: 25%;
                }
            }
            .progressBar {
                display: flex;
                width: 100%;
                height: vh(6);
                border-radius: vh(3);

                .fill {
                    height: vh(6);
                    border-radius: vh(3) 0px 0px vh(3);
                    background: rgba(0, 192, 255, 1);
                    transition: background-color 0.5s ease;
                }

                .notFill {
                    flex: 1;
                    height: vh(6);
                    border-radius: 4px;
                    background: rgba(178, 149, 94, 1);
                    border-radius: 0px vh(3) vh(3) 0px;
                }
            }

        }
    }
}
</style>